<template>
  <div class="tarveller">
    <div class="heard">
      <div>
        <div class="title">旅行者之家</div>
      </div>
      <div class="banner">
        <div>
          <img class="logo" src="img/rankHome-logo.png" alt="" />
        </div>
        <div class="right">
          <img class="right-1" src="img/2022bobfenfa.png" alt="" />
          <img class="right-2" src="img/rankHome-bob.png" alt="" />
        </div>
      </div>
    </div>
    <div class="traveNavs">
      <div>
        <div class="traveNav">目的地</div>
        <div class="traveNav">酒店</div>
        <div class="traveNav">美食</div>
        <div class="traveNav">景点玩乐</div>
        <div class="traveNav">活动&设施</div>
      </div>
    </div>
    <div class="vister">
      <div class="vister-left">
        <div class="img-header">
          <img src="img/index-link-v2.png" alt="" />
        </div>
        <div class="block">
          <span class="demonstration">热门推荐</span>
          <el-carousel height="220px" indicator-position="none">
            <el-carousel-item
              v-for="({ image, tid }, i) in data.data"
              :key="tid"
              v-show="i < 5"
              @mouseenter="now = i"
            >
              <img style="width: 100%; height: 100%" :src="`img/${image}`" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="band1">
          <div class="banditem1">最受欢迎目的地</div>
          <div class="banditem2">Popular Destinations</div>
          <div>
            <div class="item1">
              <span class="item2">1</span>
              <span class="item2">英国</span>
            </div>
            <div class="item1">
              <span class="item2">2</span>
              <span class="item2">加拿大</span>
            </div>
            <div class="item1">
              <span class="item2">3</span>
              <span class="item2">中国</span>
            </div>
          </div>
        </div>
        <div class="band1">
          <div class="banditem1">最受欢迎目的地</div>
          <div class="banditem2">Popular Destinations</div>
          <div>
            <div class="item1">
              <span class="item2">1</span>
              <span class="item2">英国</span>
            </div>
            <div class="item1">
              <span class="item2">2</span>
              <span class="item2">加拿大</span>
            </div>
            <div class="item1">
              <span class="item2">3</span>
              <span class="item2">中国</span>
            </div>
          </div>
        </div>
        <div class="band1">
          <div class="banditem1">最受欢迎目的地</div>
          <div class="banditem2">Popular Destinations</div>
          <div>
            <div class="item1">
              <span class="item2">1</span>
              <span class="item2">英国</span>
            </div>
            <div class="item1">
              <span class="item2">2</span>
              <span class="item2">加拿大</span>
            </div>
            <div class="item1">
              <span class="item2">3</span>
              <span class="item2">中国</span>
            </div>
          </div>
        </div>
      </div>
      <div class="vister-right">
        <div class="vister-header">
          <div class="vister-title">
            <div @click="active_com = 'ArticleItem'">热门游记</div>
            <div @click="active_com = ''">最新发表</div>
          </div>
          <div class="youji" @click="goEditor()">
            <i class="el-icon-edit"></i>
            <span>写游记</span>
          </div>
        </div>
        <div v-if="data">
          <!-- 组件切换 -->
          <!-- component:由官方提供的标签,会根据 is 属性的值切换到 不同的组件 -->
          <!-- :is 指定当前组件具体 是 哪个 -->
          <component
            :is="active_com"
            v-for="item in data.data"
            :key="item.pid"
            :city="item"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  components: { ArticleItem },
  data() {
    return {
      active_com: "ArticleItem", //当前激活项
      now: 0,
      data: [],
      ArticleItemdata: [],
      topNavBg: {
        backgroundColor: "",
      },
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); //监听页面滚动
    // this.axios.get("https://m.ctrip.com/restapi/soa2/20508").then(res => {
    //   console.log(res);
    //   this.data = res.data.results;
    // });
    //获取游记列表
    this.axios.get("youjilist").then(res => {
      console.log(res);
      this.data = res.data;
    });
  },
  methods: {
    //   handleScroll() {
    //     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    //     console.log(scrollTop, "滚动距离");
    //   },
    //   beforDestory() {
    //     window.removeEventListener("scroll", this.handleScroll);
    //   },
    goEditor() {
      this.$router.push("/editor");
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
.heard {
  min-width: 1280px;
  background-color: #bdf4e1;
  .title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
  }
  .banner {
    display: flex;
    .logo {
      width: 100px;
      margin: 20px 80px 20px 220px;
    }
    .right {
      display: flex;
      flex-direction: column;
      width: 300px;
      margin: 20px 0;
    }
    .right-2 {
      height: 43px;
    }
  }
}
.traveNavs {
  margin: 20px auto;
  width: 1280px;

  > div {
    display: flex;
    .traveNav {
      box-sizing: border-box;
      width: 110px;
      height: 45px;
      color: #282c33;
      border: 0.8px solid #e0e0e0;
      font-size: 17px;
      border-radius: 15px;
      text-align: center;
      line-height: 45px;
      margin-right: 8px;
      &:hover {
        border: 1px solid gray;
        font-weight: 600;
      }
    }
  }
}
.vister {
  display: flex;
  width: 1280px;
  margin: 0 auto;
  .vister-left {
    box-sizing: content-box;
    width: 300px;
    margin-top: 30px;
    margin-right: 30px;
    height: 100%;
    .band1 {
      margin-top: 70px;
      .banditem1 {
        font-size: 24px;
      }
      .banditem2 {
        font-size: 16px;
        margin-bottom: 27px;
      }

      .item1 {
        font-size: 18px;
        padding: 5px;
        .item2 {
          margin-right: 15px;
        }
      }
    }
    .img-header > img {
      width: 218px;
      height: 31px;
      vertical-align: middle;
      margin-bottom: 20px;
    }
    .block > .demonstration {
      font-size: 20px;
      color: #475669;
    }
  }
  .vister-right {
    .vister-header {
      display: flex;
      justify-content: space-between;
      width: 800px;
      border-bottom: 1px solid #e4e4e4;
      height: 45px;
      margin-left: 40px;
      .vister-title {
        display: flex;

        > div {
          height: 100%;
          width: 170px;
          font-size: 17px;
          line-height: 36px;
          margin-right: 5px;
          color: #333;

          &:active {
            border-bottom: 2px solid #ff9d00;
            font-weight: 600;
            color: #ff9d00;
          }
        }
      }
      .youji {
        width: 180px;
        height: 45px;
        background-color: #ff9d00;
        color: white;
        border: 0.8px solid #e0e0e0;
        border-radius: 15px;
        text-align: center;
        line-height: 45px;
        > span {
          margin-left: 10px;
        }
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
